<template>
	<uni-popup
		class="popup"
		ref="popup"
		type="center"
		mask-background-color="rgba(19, 19, 19, 0.6)"
		:safe-area="false"
		:mask-click="false"
		:is-mask-click="false"
	>
		<view class="battery_alert">
			<view class="battery_content" :class="[lessTen ? 'lessTen' : lessThirty ? 'lessThirty' : '']">
				<image v-if="lessTen" class="power_img" src="@/static/ring/battery/no_battery.png" mode="widthFix"></image>
				<image v-else-if="lessThirty" class="power_img" src="@/static/ring/battery/low_battery.png" mode="widthFix"></image>

				<view class="text_box">
					<view class="title">
						<text v-if="lessTen" :class="{ lessTen }">电量已低于10%！</text>
						<text v-else-if="lessThirty" :class="{ lessThirty }">电量已低于30%！</text>
					</view>

					<view class="tip">
						<text v-if="lessTen" :class="{ lessTen }">
							电量耗尽后将无法纪录数据<br />
							App也无法连接戒指<br />
							建议充电至少3-5分钟后使用！
						</text>
						<text v-else-if="lessThirty" :class="{ lessThirty }">
							为避免电量耗尽影响使用<br />
							请尽快为您的戒指充电！
						</text>
					</view>

					<view class="button" @click="close">我已知晓</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>
<script>
export default {
	props: {
		value: Boolean,
		battery: Number,
	},

	data() {
		return {
			popup: null,
		};
	},
	computed: {
		lessTen() {
			return this.battery <= 10;
		},

		lessThirty() {
			return this.battery <= 30;
		},
	},

	watch: {
		value(val) {
			if (this.popup) {
				if (val) {
					this.popup.open();
				} else {
					this.popup.close();
				}
			}
		},
	},

	mounted() {
		this.$nextTick(() => {
			this.popup = this.$refs.popup;
		});
	},

	methods: {
		close() {
			this.$emit("input", false);
		},
	},
};
</script>
<style lang="scss" scoped>
.battery_alert {
	width: 100vw;
	height: 100vh;

	display: flex;
	justify-content: center;
	align-items: center;

	.battery_content {
		width: 90%;
		background-color: #1c1c1c;
		border-radius: 30rpx;

		padding: 60rpx 50rpx;
		position: relative;

		&.lessTen::before {
			content: "";
			position: absolute;
			top: -50%;
			left: 50%;
			transform: translate(-50%, 50%);
			width: 80%;
			height: 50%;
			background: radial-gradient(50% 50% at 50% 50%, #FF5858 0%, rgba(255, 189, 189, 0) 100%);
			border-radius: 15px;
			z-index: 0;
			opacity: 0.3;
		}

		&.lessThirty::before {
			content: "";
			position: absolute;
			top: -50%;
			left: 50%;
			transform: translate(-50%, 50%);
			width: 80%;
			height: 50%;
			background: radial-gradient(50% 50% at 50% 50%, #ff7000 0%, rgba(255, 181, 123, 0) 100%);
			border-radius: 15px;
			z-index: 0;
			opacity: 0.3;
		}

		&.lessTen {
			background: linear-gradient(180deg, #ffbdbd 0%, #ffffff 51.46%);
		}

		&.lessThirty {
			background: linear-gradient(180deg, #ffdabd 0%, #ffffff 51.46%);
		}

		.power_img {
			position: absolute;
			left: 50%;
			top: -118rpx;
			width: 200rpx;
			display: block;
			margin: 0 auto;
			transform: translateX(-50%);
		}

		.text_box {
			margin-top: 90rpx;
		}

		.title {
			font-size: 70rpx;
			font-weight: 600;
			text-align: center;
			margin-top: 20rpx;
			margin-bottom: 30rpx;

			.lessTen {
				color: #ff5858;
			}

			.lessThirty {
				color: #ff7000;
			}
		}

		.tip {
			font-size: 36rpx;
			font-weight: 400;
			line-height: 50rpx;
			text-align: center;
			color: #777777;
			margin-top: 20rpx;

			.lessTen {
				width: 500rpx;
			}

			.lessThirty {
				width: 400rpx;
			}
		}

		.button {
			width: 80%;
			height: 90rpx;
			line-height: 90rpx;
			background: #2359f8;
			border-radius: 30rpx;
			margin: 60rpx auto 0;

			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			color: white;
		}
	}
}
</style>
